<template>
  <div class="top-info">
    <!-- 添加标题 -->
    <div class="title">哈密市多维消防动态处理平台</div>
    <div class="content">
      <a-row>
      <a-col :span="4">
        <div class="info-item">
          <img src="/@/assets/twoHome/topicon-1.png" alt="">
          <div class="count">
            <span>任务总数</span>
            <div>
              <span style="font-size: 24px;color:yellow">1</span>
              <span>条</span>
            </div>
          </div>   
        </div>
      </a-col>
      <a-col :span="4">
        <div class="info-item">
          <img src="/@/assets/twoHome/topicon-2.png" alt="">
          <div class="count">
            <span>已检测</span>
            <div>
              <span style="font-size: 24px;color:yellow">0</span>
              <span>条</span>
            </div>
          </div>  
        </div>
      </a-col>
      <a-col :span="4">
        <div class="info-item">
          <img src="/@/assets/twoHome/topicon-3.png" alt="">
          <div class="count">
            <span>未检测</span>
            <div>
              <span style="font-size: 24px;color:yellow">1</span>
              <span>条</span>
            </div>
          </div>  
        </div>
      </a-col>
      <a-col :span="4">
        <div class="info-item">
          <img src="/@/assets/twoHome/topicon-4.png" alt="">
          <div class="count">
            <span>我的消息</span>
            <div>
              <span style="font-size: 24px;color:yellow">91214</span>
              <span>条</span>
            </div>
          </div>  
        </div>
      </a-col>
      <a-col :span="4">
        <div class="info-item">
          <img src="/@/assets/twoHome/topicon-5.png" alt="">
          <div class="count">
            <span>待办事项</span>
            <div>
              <span style="font-size: 24px;color:yellow">0</span>
              <span>条</span>
            </div>
          </div>  
        </div>
      </a-col>
      <a-col :span="4">
        <div class="time-info">
          <span>{{ currentDate }}</span>
          <span>{{ currentWeekday }}</span>
          <span>{{ currentTime }}</span>
        </div>
      </a-col>
    </a-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

// 定义响应式数据
const currentTime = ref('');
const currentDate = ref('');
const currentWeekday = ref('');

// 更新时间的函数
const updateTime = () => {
  const now = new Date();
  const hours = String(now.getHours()).padStart(2, '0');
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  const year = now.getFullYear();
  const month = String(now.getMonth() + 1).padStart(2, '0');
  const day = String(now.getDate()).padStart(2, '0');
  const weekdayArray = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
  const weekday = weekdayArray[now.getDay()];

  currentTime.value = `${hours}:${minutes}:${seconds}`;
  currentDate.value = `${year}/${month}/${day}`;
  currentWeekday.value = weekday;
};

// 组件挂载时启动定时器
onMounted(() => {
  // 先更新一次时间
  updateTime();
  // 每秒更新一次时间
  const intervalId = setInterval(updateTime, 1000);
  // 保存定时器 ID 以便后续清除
  window._topInfoTimeInterval = intervalId;
});

// 组件卸载时清除定时器
onUnmounted(() => {
  clearInterval(window._topInfoTimeInterval);
});
</script>

<style scoped lang="less">
.top-info {
  // background: linear-gradient(to bottom right, #003366, #065c86);
  color: white;
  padding: 20px;
  position: relative; /* 为了让标题定位生效 */
}

/* 标题样式 */
.title {
  position: absolute;
  top: 10px;
  left: 20px;
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
  background-image: url("/@/assets/twoHome/title-2.png");
  background-size: 100%;
  background-repeat: no-repeat;
}
.content{
  margin-top: 40px;
  background-image: url("/@/assets/twoHome/topcount-bg.png");
  background-size: 100%;
  background-repeat: no-repeat;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  img{
    width: 60px;
    height: 60px;
  }
}

.time-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 20px;
  gap: 10px;
}
.count{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: space-between;
}
</style>    